<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>99乘法</title>
    <style>
        .container{
            width: 950px;
            margin:200px auto;
            background-color: rgb(202, 202, 202);
            min-height: 200px;
        }
        .row{
            display: flex;
            /* background-color: rgb(131, 201, 248); */
        }
        .cell{
            width: 100px;
            height: 40px;
            background-color: rgb(228, 158, 158);
            border:1px solid white;
            text-align: center;
            line-height: 40px;
            color: white;
            font-size: 1.3em ;
            font-weight: bold;
            transition: 0.3s;
            
        }
        .cell:hover{
            transform: scale(1.3);
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cell"></div>
    </div>
    <script>
        var con = document.querySelector('.container')
        // for(var row=1; row<=9; row++){
        //     // 每次行循环，就创建一个行div
        //     var rowDiv = document.createElement('div')
        //     //添加一个class
        //     rowDiv.classList.add('row')
        //     for(var col=1; col<=row; col++){
        //         //创建格子
        //         var cell = document.createElement('div')
        //          //给格子添加calss
        //         cell.classList.add('cell')
        //          //给格子添加内部文字
        //         cell.innerText = `${col}×${row}=${col*row}`
        //          把格子放入 行div
        //         rowDiv.append(cell)
        //     }
        //      //把行div放入容器内
        //     con.append(rowDiv)
        // }
        //用于拼接接收一下所有循环生成的字符串
        var html = '';
        for(var row=1; row<=1; row++){
            //生成一个空字符串，用于拼接下面所有循环生成的格子元素字符串
            var rowCellHtml = ''
            for(var col=1; col<=row; col++){
                //生成格子元素字符串，通过字符串模板设置里面的内容
                var cellHtml = `<div class="cell">${col}×${row}=${col*row}</div>`
                //把格子元素字符串拼接到循环外的空字符串，没循环一次，rowCellHtml就添加进去一个cellHtml
                rowCellHtml += cellHtml
            }
            //每次row循环中生成一个新的<div class='row'>的容器，并把rowCellHtml放进去
            var divRowHtml = `<div class='row'>${rowCellHtml}</div>`
            //把rowCellHtml添加到html字符串中
            html += divRowHtml
        }
        con.innerHTML = html
    </script>
</body>
</html>